import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addBuyNum,decBuyNum } from '../store/slice/car'
export default function CarList() {
    let { carList } = useSelector(state => state.car)
    const dispatch = useDispatch()
    return (
        <div>
            <h3>购物车列表</h3>
            <ul>
                {carList.map(item => (
                    <li key={item.id}>
                        <p>商品名称： {item.gname}</p>
                        <p>商品价格: {item.price}</p>
                        <p>购买数量:
                            <button onClick={()=>{
                                dispatch(decBuyNum(item))
                            }}>-</button>
                            <span>{item.buyNum}</span>
                            <button onClick={() => {
                                dispatch(addBuyNum(item))
                            }}>+</button>
                        </p>
                    </li>
                ))}
            </ul>
        </div>
    )
}
